<template>
  <div class="auth-draw-pwd-wrap">
    <div class="auth-wx-phone">
      <div class="phone-box">
        <span class="title">验证码发送至您手机</span>
        <span class="phone-num">{{sysPhone}}</span>
      </div>
    </div>

    <div class="auth-verify-box">
      <div class="verify-con">
        <span class="verify-title">验证码</span>
        <div class="code-con">
          <div class="code-box">
            <input class="code" type="number" oninput="if(value.length>6)value=value.slice(0,6)" placeholder="请输入验证码"
                   v-model="codeNum"/>
          </div>
          <timer-btn ref="timerBtn" class="mobile" v-on:run="sendCode"></timer-btn>
        </div>
      </div>
    </div>

    <button class="sure-text" type="button" @click="verifyCode">下一步</button>
  </div>
</template>

<script>
  import code from "../../components/code"
  import {getSessionStore} from "../../config/util";
  import {checkCode, checkPhone} from "../../config/verify";
  import {getToken, mateCode, sendCode} from "../../axios/api";

  export default {
    data() {
      return {
        sysPhone: "",
        mobile: "",
        codeNum: "",
        token1: "",
        token2: "",
        certNum: this.$route.query.certNum,
        userName: this.$route.query.userName
      }
    },
    created() {
      let phone = getSessionStore("proxy_sys_phone");
      this.mobile = phone;
      this.sysPhone = phone.substring(0, 3) + "****" + phone.substring(phone.length - 4, phone.length);
    },
    methods: {
      sendCode() {//获取验证码
        let phone = this.mobile;
        if (checkPhone(phone)) {
          let param1 = {
            "phone": phone,
            "i": 5
          };
          this.$refs.timerBtn.setDisabled(true);
          getToken(param1).then((res) => {//获取token
            this.token1 = res.data;

            let param2 = {
              "phone": phone,
              "i": 5,
              "userToken": this.token1
            };
            sendCode(param2).then((res) => {//发送验证码
              if (res.code == 0) {
                this.token2 = res.data;
                this.$refs.timerBtn.setDisabled(true);//设置按钮不可用
                this.$refs.timerBtn.start(); //启动倒计时
              } else {
                this.$refs.timerBtn.stop();
                this.$vux.toast.text(res.msg, "middle");
              }
            });
          });
        }
      },
      verifyCode() {//下一步
        let code = this.codeNum;
        if (checkCode(code)) {
          this.$vux.loading.show({
            text: '加载中',
          });

          let param1 = {
            "phone": this.mobile,
            "i": 5,
            "code": code,
            "token": this.token2,
          };
          mateCode(param1).then((res) => {//校验验证码
            this.$vux.loading.hide();
            console.log(getSessionStore("proxy_mark_01") + getSessionStore("proxy_mark_02"))

            if (res.code == 0) {
              if (getSessionStore("proxy_mark_01") == 8001) {
                this.$router.push({
                  path: "/bankUnBindProcess2",
                  query: {"certNum": this.certNum, "userName": this.userName}
                });
              } else if (getSessionStore("proxy_mark_01") == 8002) {
                this.$router.push({
                  path: "/modifyDrawPwd",
                  query: {"showPage": 3}
                });
              }
            } else {
              this.$vux.toast.text(res.msg, "middle");
            }
          });
        }
      }
    },
    components: {
      "timer-btn": code
    }
  }
</script>

<style lang="less" scoped>
  @import "../../assest/mixin";

  .auth-draw-pwd-wrap {
    .wh(100%, 100%);
    background: @talent-theme-bg-color;
    .auth-wx-phone {
      .wh(100%, 1.333rem);
      background: #FFF;
      display: flex;
      .phone-box {
        margin-left: 0.32rem;
        display: flex;
        align-items: center;
        .wh(96.8%, 1.333rem);
        border-bottom: 0.027rem solid #f2f2f2;
        .title {
          .size-color(0.427rem, rgba(51, 51, 51, 1));
        }
        .phone-num {
          padding-left: 0.1rem;
          .size-color(0.427rem, #3cafff);
        }
      }

    }
    .auth-verify-box {
      .wh(100%, 1.333rem);
      background: #FFF;
      margin-bottom: 1.733rem;
      .verify-con {
        display: flex;
        align-items: center;
        margin-left: 0.32rem;
        .wh(96.8%, 1.333rem);
        background: #FFF;
        .verify-title {
          .size-color(0.427rem, rgba(51, 51, 51, 1));
          padding-right: 0.92rem;
        }
        .code-con {
          display: flex;
          align-items: center;
          width: 7.147rem;
          justify-content: space-between;
          .code-box {
            display: flex;
            align-items: center;
            width: 60%;
            .code {
              .size-color(0.427rem, #333);
              width: 100%;
            }
          }
          .mobile {
            height: 0.8rem;
            line-height: 0.8rem;
            background: #FFF;
            .size-color(0.427rem, rgba(60, 175, 255, 1));
          }
        }
      }
    }
    .sure-text {
      .fj(center, center);
      margin: 0 auto;
      .wh(9.04rem, 1.333rem);
      background: rgba(60, 175, 255, 1);
      border-radius: 0.107rem;
      .size-color(0.48rem, rgba(255, 255, 255, 1));
    }
  }
</style>
